//等页面加载完 在运行代码
window.addEventListener('load', function() {
    var preview_img = document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    //1.当鼠标经过 preview 盒子时 mask和big盒子显示
    preview_img.addEventListener('mouseover', function() {
            mask.style.display = 'block';
            big.style.display = 'block';
        })
        //当鼠标离开 preview 盒子时 mask和big盒子隐藏
    preview_img.addEventListener('mouseout', function() {
            mask.style.display = 'none';
            big.style.display = 'none';
        })
        //2.鼠标移动盒子跟着走
    preview_img.addEventListener('mousemove', function(e) {
        //先计算出 鼠标在盒子内的坐标
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // console.log(x, y);
        //再把这个距离赋值给 盒子的上和左边距
        //-mask.offsetWidtn / 2 是减去盒子高度的一半 让鼠标在遮罩层的中间
        var masky = y - mask.offsetWidth / 2;
        var maskx = x - mask.offsetHeight / 2;

        //给遮罩层一个移动范围  在父盒子 pre盒子里
        var maskMax = preview_img.offsetWidth - mask.offsetWidth;
        if (maskx <= 0) {
            maskx = 0;
        } else if (maskx >= maskMax) {
            maskx = maskMax;
        }
        if (masky <= 0) {
            masky = 0;
        } else if (masky >= maskMax) {
            masky = maskMax;
        }
        mask.style.top = masky + 'px';
        mask.style.left = maskx + 'px';
        // 大图的移动距离 = 遮罩层移动距离 * 大图最大移动距离 /遮罩层最大移动距离
        var bigimg = document.querySelector('.bigImg');
        var bigMax = bigimg.offsetWidth - big.offsetWidth;
        var bigx = maskx * bigMax / maskMax;
        var bigy = masky * bigMax / maskMax;
        bigimg.style.top = -bigy + 'px';
        bigimg.style.left = -bigx + 'px';
        //    3. 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
        // 大图
        // var bigIMg = document.querySelector('.bigImg');
        // // 大图片最大移动距离
        // var bigMax = bigIMg.offsetWidth - big.offsetWidth;
        // // 大图片的移动距离 X Y
        // var bigX = maskx * bigMax / maskMax;
        // var bigY = masky * bigMax / maskMax;
        // bigIMg.style.left = -bigX + 'px';
        // bigIMg.style.top = -bigY + 'px';

    })


})